import React, { Component } from 'react';
import { category_subcate } from "../../utils/api";
import EventEmitter from '../../utils/emit'
import { withRouter } from 'react-router-dom'
import { Swiper } from "antd-mobile";

class TabRight extends Component {
    state = {
        swiptPic: [],
        righttab: []
    }
    componentDidMount() {
        // 绑定事件,接受TabLeft传过来的参数
        EventEmitter.on('saveIndex', (index) => {
            // 发送axios请求
            category_subcate({ id: index }).then((res) => {
                this.setState({
                    swiptPic: res.data.subcate.billboards,
                    righttab: res.data.subcate.subcategory
                });
            })
        })
    }
    handleChange(id) {
        this.props.history.push({ pathname: '/index/goods', state: { id } })
    }
    render() {
        return (

            <div className='tabright'>
                <Swiper loop>
                    {
                        this.state.swiptPic.map((item, index) => (
                            <Swiper.Item key={index}>
                                <img src={item.pic}  />
                            </Swiper.Item>
                        ))
                    }
                </Swiper>
                {
                    this.state.righttab.map((item, index) => {
                        return (
                            <div className='catelist' key={index}>
                                <div className='name'>{item.name}</div>
                                <div className='good'>
                                    {
                                        item.subNavs.map((item1, index1) => {
                                            return (
                                                <div className='subname' key={index1} onClick={() => { this.handleChange(item1.id) }}>
                                                    <div className='content'>
                                                        <img className='img-box' src={item1.pic} alt={item1.name} />
                                                        <div className='ygc_name'>{item1.name}</div>
                                                    </div>
                                                </div>
                                            )
                                        })
                                    }
                                </div>
                            </div>
                        )
                    })
                }
            </div>
        )
    }
}

export default withRouter(TabRight); 